<template>
  <view class="icon-box" :style="{ width: `${props.width}px` }">
    <image :style="{ width: `${props.width}px`, height: `${props.height}px` }" :src="getImageUrl(props.name)" :alt="props.text" />
    <text v-if="props.label.length !== 0" :style="{ fontSize: `${props.labelSize}px`, color: `${props.labelColor}`, marginTop: `${props.labelGap}px` }">{{ props.label }}</text>
  </view>
</template>

<script setup name="urlIcon">
const props = defineProps({
  name: {
    type: String,
  },
  label: {
    type: String,
    default: "",
  },
  // 图标宽 px
  width: {
    type: [String, Number],
    default: 40,
  },
  // 图标高 px
  height: {
    type: [String, Number],
    default: 40,
  },
  // 文字大小 px
  labelSize: {
    type: [String, Number],
    default: 10,
  },
  // 文字颜色 px
  labelColor: {
    type: [String, Number],
    default: "#666666",
  },
  // 图标文字间隔 px
  labelGap: {
    type: [String, Number],
    default: 5,
  },
});

const getImageUrl = (name) => {
  return `../../static/img/icons/${name}.png`;
};
</script>

<style lang="scss" scoped>
.icon-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
